import 宝兴耐材LOGO from "../content/img/宝兴耐材LOGO.JPG";
import 宝兴耐材 from "../content/img/宝兴耐材.jpg";
import 永安达LOGO from "../content/img/永安达LOGO.png";
import 永安达 from "../content/img/永安达.jpg";
import 钰滔节能科技 from "../content/img/钰滔节能科技.png";
import 钰滔节能科技LOGO from "../content/img/钰滔节能科技LOGO.png";
import 煜岭自营厂LOGO from "../content/img/煜岭自营厂LOGO.png";
import 煜岭自营厂 from "../content/img/煜岭自营厂.jpg";
import 凤宝 from "../content/img/凤宝.png";
import 凤宝LOGO from "../content/img/凤宝LOGO.png";
import 济源钢铁LOGO from "../content/img/济源钢铁LOGO.png";
import 济源钢铁 from "../content/img/济源钢铁.jpg";
import { Button } from "antd";
import React, { useState } from "react";
import { Row, Col, Icon } from "antd";
import { allStore } from "../../../store/AllStore";

// import { allStore } from "../../store/AllStore";
function FactoryContent() {
  return (
    <div>
      <FctModeOne />
      <FctModeTwo />
    </div>
  );
}
export default FactoryContent;
function FctModeOne() {
  const AboutFactory = () => {
    const element = document.getElementById("factories");
    element.scrollIntoView({ behavior: "smooth" });
  };
  return (
    <div>
      <div className="fct-layout">
        <div
          style={{
            display: "flex",
            flexDirection: "column",
            alignItems: "center",
            marginBottom: 64,
            color: "#000",
          }}
        >
          <div style={{ fontSize: 42, fontWeight: 600 }}>
            {allStore.isEnglish ? "Factory Information" : "工厂信息"}
          </div>
          <div
            style={{
              fontSize: allStore.isEnglish ? 14 : 18,
              fontWeight: 500,
              marginTop: 12,
              width: 720,
              textAlign: "center",
            }}
          >
            {allStore.isEnglish
              ? "The company has multiple self operated and cooperative factories, adopting a front store and back factory business model to strictly control product quality"
              : "公司拥有多家自营和合作工厂，采用前店后厂的经营模式，严格控制产品质量"}
          </div>
          <Button
            onClick={AboutFactory}
            style={{
              marginTop: 24,
              width: 140,
              height: 50,
              fontSize: 16,
              borderRadius: 8,
              fontWeight: 600,
            }}
          >
            {allStore.isEnglish ? "READ MORE" : "了解更多"}
          </Button>
        </div>
      </div>
    </div>
  );
}
function FctModeTwo() {
  return (
    <div>
      <div className="fct-layout-all" id="factories">
        <Row style={{ marginTop: 64 }}>
          <Col span={8} className="col">
            <FctCard
              img={宝兴耐材}
              name={
                <div style={{ display: "flex", alignItems: "center" }}>
                  <img
                    style={{ height: 42, marginRight: 14 }}
                    src={宝兴耐材LOGO}
                    alt=""
                  ></img>
                  <div>
                    <div>淄博宝兴工贸有限公司</div>{" "}
                    <div style={{ fontSize: 12 }}>
                      Zibo Baoxing Industry and Trade Co., Ltd
                    </div>
                  </div>
                </div>
              }
              discription={
                allStore.isEnglish
                  ? "        Zibo Baoxing Industry and Trade Co., Ltd. was established on March 19, 2010, formerly known as Tailai Refractory Material Processing Factory established in 1993. It is a one person limited liability company with professional production and processing capabilities for refractory materials such as clay refractory bricks and high alumina refractory bricks. The company is headquartered in Lingzi Town, Zichuan District, Zibo City, Shandong Province, China. Zibo Baoxing Industry and Trade Co., Ltd. has a complete and scientific quality management system and an annual production capacity of 30000 tons.The refractory material products produced by the company use high-purity raw materials, scientific formulas, and advanced technology; Our main products include clay and high alumina refractory bricks, lightweight insulation bricks, silicon bricks, silicon carbide, aluminum-magnesium, phosphate bonded high alumina refractory bricks, diatomaceous earth products, various types of bulk materials (bone powder, fine powder, castables, high-temperature adhesives, etc.) refractory material series, and we design and produce various special-shaped refractory material products according to user requirements; Insulation materials, refractory molds, and refractory equipment accessories. Widely used in various industries such as metallurgy, glass, building materials, and chemical industry."
                  : "        淄博宝兴工贸有限公司成立于2010年3月19日，前身是1993成立的泰来耐火材料加工厂，是一家具有专业生产加工粘土质耐火砖、高铝质耐火砖等耐材能力的一人有限责任公司,公司总部设在中国山东省淄博市淄川区岭子镇,淄博宝兴工贸有限公司拥有完整、科学的质量管理体系，年生产能力3万吨。公司生产的耐火材料制品，采用高纯原料、科学配方、先进技术；主要产品有粘土质、高铝质耐火砖，轻质保温砖、硅砖、碳化硅、铝镁质、磷酸盐结合高铝质耐火砖，硅藻土制品，各型散装料（骨粉、细粉、浇注料、高温粘合剂等）耐火材料系列，并按用户要求设计生产各类异型耐火材料制品；保温材料、耐火模具及耐火材料设备配件。广泛应用于冶金、玻璃、建材、化工等各行业。"
              }
            />
          </Col>
          <Col span={8} className="col">
            <FctCard
              img={永安达}
              // name={allStore.isEnglish ? <span style={{fontSize:16}}>Shandong yonganda Refractory technology co.,ltd.</span> : "山东永安达耐材科技股份有限公司"}
              name={
                <div style={{ display: "flex", alignItems: "center" }}>
                  <img
                    style={{ height: 48, marginRight: 4 }}
                    src={永安达LOGO}
                    alt=""
                  ></img>
                  <div>
                    <div style={{ fontSize: 16 }}>
                      山东永安达耐材科技股份有限公司
                    </div>{" "}
                    <div style={{ fontSize: 10 }}>
                      Shandong yonganda Refractory technology co.,ltd.
                    </div>
                  </div>
                </div>
              }
              discription={
                allStore.isEnglish
                  ? "        Shandong Yonganda Refractory Technology Co., Ltd. is a major domestic supplier of high-end refractory materials and amorphous refractory materials, as well as an import and export company in the provincial high-tech industry chain. The company has strong technical strength and a professional research team of over 60 people, including advanced automated production equipment, complete testing procedures, professional technical personnel, and intermediate and senior engineers; We have established technical cooperation relationships with Luoyang Refractory Materials Research Institute, Wuhan University of Science and Technology, Zhengzhou University, and other universities. The company covers an area of 150000 square meters, with an annual output of over 100000 tons, fixed assets of 260 million yuan, and a registered capital of 13.095 million yuan. Our products cover leading enterprises in major high-temperature fields such as steel, metallurgy, and petrochemicals. It was successfully listed on the Shanghai Equity Custody Trading Center on September 15, 2015."
                  : "        山东永安达耐材科技股份有限公司是国内主要高档耐火材料，不定型耐火材料供应商，省高新技术产业链的进出口公司。公司技术力量雄厚，拥有先进的自动化生产设备、完善的检测程序和专业技术人员、中高级工程师等六十多人的专业科研队伍；先后同洛阳耐火材料研究所，武汉科技大学，郑州大学等院校建立了技术合作关系。公司占地150000平米，年产量10万多吨，固定资产26000万，注册资金1309.5万元。产品覆盖钢铁、冶金、石化等主要高温领域的龙头企业。于2015年9月15日在上海股权托管交易中心成功挂牌。"
              }
            />
          </Col>
          <Col span={8} className="col">
            <FctCard
              name={
                <div style={{ display: "flex", alignItems: "center" }}>
                  <img
                    style={{ height: 42, marginRight: 4 }}
                    src={钰滔节能科技LOGO}
                    alt=""
                  ></img>
                  <div>
                    <div style={{ fontSize: 18 }}>山东钰滔节能科技有限公司</div>{" "}
                    <div style={{ fontSize: 8 }}>
                      SHANDONG YUTAO ENERGY SAVING TECHNOLOGY CO.,LTD
                    </div>
                  </div>
                </div>
              }
              img={钰滔节能科技}
              discription={
                allStore.isEnglish
                  ? "        Shandong Yutao Energy saving Technology Co., Ltd. is one of the main domestic suppliers of refractory material research and development, manufacturing, application technology promotion, and sales. It has five series of products including refractory ceramic fibers, crystal fibers, refractory bricks, and refractory castables. The company has a professional application technology design institute and product research and development center, which can provide customers with technologically advanced and economically reasonable industrial kiln lining and pipeline insulation structure design; At the same time, the company has a professional team for furnace construction, undertaking the overall masonry, insulation, and maintenance of various kilns, and can provide customers with construction services under various complex working conditions."
                  : "        山东钰滔节能科技有限公司是国内主要耐火材料研发、制造、应用技术推广、销售商之一，拥有耐火陶瓷纤维、晶体纤维、耐火砖、耐火浇注料等五大系列产品，公司拥有专业的应用技术设计所及产品研发中心，能够为客户提供技术先进、经济合理的工业窑炉衬里、管道保温结构设计;与此同时，公司拥有专业的筑炉施工队伍，承接各种窑炉的整体砌筑、保温及大中小型维修业务，可以为客户提供各种复杂工况条件下的施工服务。"
              }
            />
          </Col>
        </Row>
        <Row style={{ marginTop: 100 }}>
          <Col span={8} className="col">
            <FctCard
              name={
                <div style={{ display: "flex", alignItems: "center" }}>
                  <img
                    style={{ height: 32, marginRight: 4 }}
                    src={煜岭自营厂LOGO}
                    alt=""
                  ></img>
                  <div>
                    <div style={{ fontSize: 18 }}>山东煜岭国际贸易有限公司</div>{" "}
                    <div style={{ fontSize: 10 }}>
                      Shondong Y uling Internqtionql Trade Co, Ltd
                    </div>
                  </div>
                </div>
              }
              img={煜岭自营厂}
              discription={
                allStore.isEnglish
                  ? "        Shandong Yuling International Trading Company was established in 2020 with a registered capital of 3 million RMB. The company is located in Zibo City, Shandong Province, China, and its customers are distributed in South Korea, Southeast Asia, and the Middle East. The company's main business includes refractory materials such as clay refractory bricks, insulation bricks, fireproof cotton, etc; Round steel, special steel and other steel materials. The company has several self operated and cooperative factories, adopting a front store and back factory business model, strictly controlling product quality, and providing the highest quality products to customers. The main online sales platform of the company is Alibaba International Station (homepage website: available now). Welcome to consult and cooperate"
                  : "        山东煜岭国际贸易公司成立于2020年，注册资本三百万人民币，公司位于中国山东省淄博市，客户在韩国、东南亚、中东地区均有分布。公司主营业务有：黏土耐火砖、保温砖、防火棉等耐火材料；圆钢、特钢等钢铁材料。公司拥有自营与合作工厂若干家，采用前店后厂的经营模式，严格把控产品质量，将最优质的产品提供给客户。公司主要网络销售平台为：Alibaba国际站（主页网址：现在可以有）。欢迎前来咨询与合作。"
              }
            />
          </Col>
          <Col span={8} className="col">
            <FctCard
              name={
                <div style={{ display: "flex", alignItems: "center" }}>
                  <img
                    style={{ height: 42, marginRight: 4 }}
                    src={凤宝LOGO}
                    alt=""
                  ></img>
                  <div>
                    <div style={{ fontSize: 18 }}>河南凤宝特钢有限公司</div>{" "}
                    <div style={{ fontSize: 10 }}>
                      Henan Fengbao SPECIAL Steel Co., Ltd
                    </div>
                  </div>
                </div>
              }
              img={凤宝}
              discription={
                allStore.isEnglish
                  ? `        Henan Fengbao Special Steel Co., Ltd. is a steel joint enterprise that integrates steel smelting, seamless steel pipes, profiles, mechanical manufacturing, power generation, international trade and other industries. It is a member unit of the China Iron and Steel Industry Association, and is a member of 1000 large industrial enterprises in China, one of the top 500 private manufacturing enterprises in China, one of the top 100 enterprises in Henan Province, one of the top 100 high-tech enterprises in Henan Province, and an important high-end seamless steel pipe research and development base in Henan Province. Fengbao Group always adheres to the guiding ideology of "creating value for customers is our goal, and customer needs are the direction of our efforts", advocates the business philosophy of "sincerity, trustworthiness, cooperation and win-win", and the development goal of "creating first-class performance and building a century old Fengbao". The company has many achievements and long-term strategic clients in various industrial system fields such as seamless steel pipe industry, commercial trailer industry, and aluminum electric industry.`
                  : "        河南凤宝特钢有限公司是融钢铁冶炼、无缝钢管、型材、机械制造、发电、国际贸易等产业为一体的钢铁联合企业，是中国钢铁工业协会成员单位，属全国1000家大型工业企业、中国民营制造业500强企业、河南省百强企业、河南省百高企业、高新技术企业，是河南省重要的高端无缝钢管研发基地。凤宝集团始终秉承以“为客户创造价值就是我们的目标、客户的需求就是我们努力的方向”指导思想,倡导“真诚守信、合作共赢”的企业经营理念及“创一流业绩建百年凤宝”的发展目标。公司在无缝钢管行业、商用挂车行业、铝电行业等各个工业系统领域有着诸多的业绩和长期合作战略客户。"
              }
            />
          </Col>
          <Col span={8} className="col">
            <FctCard
              name={
                <div style={{ display: "flex", alignItems: "center" }}>
                  <img
                    style={{ height: 42, marginRight: 4 }}
                    src={济源钢铁LOGO}
                    alt=""
                  ></img>
                  <div>
                    <div style={{ fontSize: 18 }}>
                      河南济源钢铁（集团）有限公司
                    </div>{" "}
                    <div style={{ fontSize: 10 }}>
                      HENAN JIYUAN IRON & STEEL(GROUP)CO., LTD
                    </div>
                  </div>
                </div>
              }
              img={济源钢铁}
              discription={
                allStore.isEnglish
                  ? `        Henan Jiyuan Iron and Steel (Group) Co., Ltd. was founded in 1958. It is a large backbone steel enterprise in China, a national high-tech enterprise, one of China's top 500 enterprises, one of China's top 100 private enterprises, one of China's top 500 manufacturing enterprises, and one of the world's top 100 steel enterprises. It is an executive director unit of the China Iron and Steel Association, and a vice chairman unit of the China Special Steel Association and the All China Federation of Industry and Commerce Metallurgical Chamber of Commerce. Located in Jiyuan City, Henan Province, with convenient transportation, the railway dedicated line is connected to the Jiaozhi Railway Line. At present, there are 8000 employees, 3000 professional and technical personnel, and a total asset value of 25 billion yuan.
                  The main line of the company's steel production is a long-term production process, with excellent iron, steel, materials, and testing equipment, advanced technology, and international advanced level. The annual production capacity is 5 million tons, and it is a domestic production base for high-quality steel bars and wires with a wide variety and complete specifications. Jiyuan Iron and Steel will achieve deep transformation in green manufacturing, intelligent manufacturing, and service manufacturing, continuously strengthen responsibility and mission, and strive to build a first-class domestic and globally influential high-quality and special steel production base.`
                  : "        河南济源钢铁（集团）有限公司始建于1958年，属中国大型钢铁骨干企业、国家级高新技术企业、中国企业500强、中国民营企业100强、中国制造业500强和世界钢铁企业100强，系中国钢铁协会常务理事单位，中国特钢协会和全国工商联冶金商会副会长单位。位于河南省济源市境内，交通便利，铁路专用线与焦枝铁路线连接。目前，拥有员工8000人，各类专业技术人员3000人，资产总额250亿元。公司钢铁主线为长流程生产工艺，铁、钢、材和检测装备精良，工艺先进，具备国际先进水平，年生产能力500万吨，系国内品种多、规格全的优特钢棒、线材生产基地。济源钢铁将在绿色制造、智能制造和服务制造等方面实现深度转型，不断强化责任担当与使命担当，努力建设国内一流、全球有影响力的精品优特钢生产基地"
              }
            />
          </Col>
        </Row>
      </div>
    </div>
  );
}
function FctCard({ img, name, discription }) {
  const [visible, setVisible] = useState(false);
  const [zIndex, setZIndex] = useState(1);
  const openModal = () => {
    console.log("open");
    setVisible(true);
    setZIndex(5);
  };
  const closeModal = () => {
    setVisible(false);
    setZIndex(1);
  };
  return (
    <div className="fct-card" style={{ zIndex: zIndex }}>
      <div
        // onClick={closeModal}
        style={{
          backgroundColor: "transparent",
          position: "fixed",
          height: "100vh",
          width: "100%",
          zIndex: 10,
          top: 0,
          right: 0,
          left: 0,
          bottom: 0,
          display: visible ? "block" : "none",
        }}
      >
        <div
          style={{
            position: "absolute",
            height: "100%",
            width: "100%",
            backgroundColor: "black",
            opacity: 0.5,
          }}
        ></div>
        <div
          style={{
            position: "absolute",
            height: "100%",
            width: "100%",
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
          }}
        >
          <div
            style={{
              display: "flex",
              flexDirection: "column",
              alignItems: "center",
            }}
          >
            <div>
              <img
                src={img}
                alt=""
                style={{ maxHeight: "80vh", maxWidth: "80vw" }}
              ></img>
              <Button className="dtl-close" type="link" onClick={closeModal}>
                <Icon type="close" />
              </Button>
            </div>
            <div
              style={{
                color: "#fff",
                maxWidth: "calc(80vw - 128px)",
                maxHeight: "16vh",
                overflow: "auto",
              }}
            >
              {discription}
            </div>
          </div>
        </div>
      </div>
      <div
        style={{
          height: 220,
          width: 345,
          backgroundImage: `url(${img})`,
          backgroundRepeat: "no-repeat",
          backgroundSize: "cover",
          backgroundPosition: "center",
          borderRadius: "16px 16px 0px 0px",
        }}
      ></div>
      <div className="fct-card-cover">
        <Button
          onClick={openModal}
          type="primary"
          style={{ fontSize: 14, height: 40, width: 150, borderRadius: 16 }}
        >
          {allStore.isEnglish ? "View Details" : "查看详情"}
        </Button>
      </div>
      <div
        style={{
          border: "1px solid #e8e8e8",
          backgroundColor: "#fff",
          height: 220,
          width: 345,
          position: "absolute",
          bottom: 0,
          borderRadius: 16,
          padding: "6px 16px",
          zIndex: 2,
        }}
      >
        <div style={{ fontSize: 18, height: 45, fontWeight: 600 }}>{name}</div>
        <div
          style={{ height: 4, width: 250, backgroundColor: "#fa8c16" }}
        ></div>
        <div
          style={{
            fontSize: 12,
            height: 142,
            marginTop: 6,
            overflow: "hidden",
            textOverflow: "ellipsis",
          }}
        >
          {discription}
        </div>
      </div>
    </div>
  );
}
